<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制圆移动</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: 100vh;
            background-color: #f0f0f0;
        }
        #circle {
            width: 150px;
            height: 150px;
            background-color: blue;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: bottom 0.2s, left 0.1s;
        }
    </style>
</head>
<body>
    <div id="circle"></div>

    <script>
        const circle = document.getElementById('circle');
        let left = 50; // 初始位置为50%
        let isJumping = false;

        document.addEventListener('keydown', (event) => {
            switch(event.key) {
                case 'ArrowLeft':
                    left = Math.max(0, left - 5); // 向左移动
                    circle.style.left = `${left}%`;
                    break;
                case 'ArrowRight':
                    left = Math.min(100, left + 5); // 向右移动
                    circle.style.left = `${left}%`;
                    break;
                case 'ArrowUp':
                    if (!isJumping) {
                        isJumping = true;
                        circle.style.bottom = '200px'; // 跳起
                        setTimeout(() => {
                            circle.style.bottom = '0'; // 落下
                            isJumping = false;
                        }, 300);
                    }
                    break;
            }
        });
    </script>
</body>
</html>